<template>
  <div class="xisha" @click="xishaClickHandle">
    <el-tooltip :open-delay="1000" placement="top">
      <div slot="content">
        <span class="content_title">设备编号：</span>
        {{ id }}
        <br />
        <span class="content_title">设备状态：</span>
        {{ getHeadName(data.stateCode) }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ xiaolv }}%
        <br />
        <span class="content_title">生产品种：</span>
        R50SAA-1
        <br />
        <span class="content_title">更新时间：{{ data.time }}</span>
      </div>
      <svg
        width="9px"
        height="80px"
        viewBox="0 0 9 92"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g
          id="大屏"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <g id="首页" transform="translate(-326.000000, -183.000000)">
            <g id="编组-9" transform="translate(327.000000, 184.000000)">
              <polygon
                id="矩形"
                :style="bodyStyle"
                stroke="#8FCDFA"
                transform="translate(3.500000, 44.000000) scale(1, -1) translate(-3.500000, -44.000000) "
                points="0 9 7 9 7 79 0 79"
              ></polygon>
              <path
                d="M3.5,70 C5.43299662,70 7,71.5670034 7,73.5 L7,90 L7,90 L0,90 L0,73.5 C-2.36723813e-16,71.5670034 1.56700338,70 3.5,70 Z"
                id="矩形"
                stroke="#8FCDFA"
                :style="headStyle"
                transform="translate(3.500000, 80.000000) scale(1, -1) translate(-3.500000, -80.000000) "
              ></path>
              <rect
                id="矩形备份-4"
                stroke="#8FCDFA"
                :style="bodyStyle"
                x="0"
                y="0"
                width="7"
                height="10"
                rx="1"
              ></rect>
              <text
                v-if="inline"
                id="151"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="10"
                font-weight="400"
                line-spacing="10"
                fill="#FFFFFF"
              >
                <tspan x="0.96" y="20">
                  {{ id.toString().substring(0, 1) }}
                </tspan>
                <tspan x="0.5" y="30">
                  {{ id.toString().substring(1, 2) }}
                </tspan>
                <tspan x="0.96" y="40">
                  {{ id.toString().substring(2, 3) }}
                </tspan>
              </text>
              <text
                v-else
                id="151"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="10"
                font-weight="400"
                line-spacing="10"
                fill="#FFFFFF"
              >
                <tspan x="0.96" y="44">
                  {{ id.toString().substring(0, 1) }}
                </tspan>
                <tspan x="0.5" y="54">
                  {{ id.toString().substring(1, 2) }}
                </tspan>
                <tspan x="0.96" y="64">
                  {{ id.toString().substring(2, 3) }}
                </tspan>
              </text>
              <text
                v-if="inline"
                id="效率"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="10"
                font-weight="400"
                line-spacing="10"
                fill="#FFF"
                transform="translate(0.96,48) scale(0.7) rotate(90)"
              >
                {{ xiaolv + '%' }}
              </text>
            </g>
          </g>
        </g>
      </svg>
    </el-tooltip>
  </div>
</template>

<script>
import { mul } from '@/utils/caculate';
export default {
  name: 'xisha',
  props: {
    data: Object,
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ''
      },
      bodyStyle: {
        fill: ''
      },
      id: '',
      xiaolv: ''
    };
  },
  watch: {
    data: {
      deep: true, //true 深度监听
      immediate: true,
      handler(val) {
        this.draw();
      }
    }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.headStyle.fill = this.getHeadColor(this.data.stateCode);
      this.bodyStyle.fill = this.getBodyColor(this.data.xiaolv);
      this.id = this.data.devSn;
      this.xiaolv = mul(this.data.xiaolv, 100);
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44';
        //停止
        case 2:
          return '#888F93';
        //故障
        case 3:
          return '#6D000E';
        //满纱满桶
        case 4:
          return '#ECCD54';
        //通讯失败
        case 5:
          return '#EB4E27';
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return '运行';
        //停止
        case 2:
          return '停止';
        //故障
        case 3:
          return '故障';
        //满纱满桶
        case 4:
          return '满纱满桶';
        //通讯失败
        case 5:
          return '通讯故障';
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(stateCode1) {
      let stateCode = Number(stateCode1) * 100;
      if (stateCode >= 90) {
        return '#2D69C7';
      } else if (90 > stateCode && stateCode >= 80) {
        return '#ECCD54';
      } else if (80 > stateCode && stateCode > 70) {
        return '#ECCD54';
      } else if (stateCode <= 70) {
        return '#EB4E27';
      }
    },
    //组件点击事件
    xishaClickHandle() {
      this.$emit('xishaClickHandle', this.data);
    }
  }
};
</script>

<style lang="scss" scoped>
.cls-1 {
  fill: #519aff;
}

.cls-1,
.cls-2,
.cls-4 {
  stroke: #82c4fa;
  stroke-width: 10px;
}

.cls-2 {
  fill-rule: evenodd;
  fill: url(#linear-gradient);
}

.cls-3 {
  fill: #fff;
  font-family: 'Source Han Sans CN';
  font-weight: 700;
  word-break: break-all;
}

.cls-4 {
  fill: url(#linear-gradient-2);
}

.xisha {
  width: 10px;
}
</style>
